<!-- 订单统计 -->
<template>
  <div class="merchant-platform-container">

    <BasicTable @register="registerTable" class="table-container">
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'orderInfo'">
          <div class="flex flex-auto">
            <div class="flex-shrink-0">
              <Image
                :src="record.imageUrl"
                width="67px"
                height="67px"
                style="object-fit: cover;"
              ></Image>
            </div>
            <div class="ml-3 text-left">
              <Tooltip :title="record.productName">
                <div class="line-clamp-2 max-h-12 w-[180px]" style="white-space: normal;">
                  {{ record.productName }}
                </div>
              </Tooltip>
              <div class="text-[#86909C] pt-2">{{ record.productSkuName }}</div>
            </div>
          </div>
        </template>
        <template v-if="column.key === 'orderMoney'">
          <div><span>单价：</span><span>{{ record.productPrice }}</span></div>
          <div><span>数量：</span><span>{{ record.productTotalNum }}</span></div>
          <div><span>合计：</span><span>{{ record.totalAmount }}</span></div>
        </template>
        <template v-else-if="column.key === 'userName'">
          <div class="flex items-center">
            <Avatar :src="record.userAvatar" class="flex-shrink-0" />
            <div class="ml-2">
              <span>{{ record.userName }}</span>
              <span>{{ record.userPhone }}</span>
            </div>
          </div>
        </template>
        <template v-else-if="column.key === 'action'">
          <TableAction :actions="[
            {
              label: '详情',
              onClick: () => router.push({
                name: 'detail',
                query: {
                  id: record.id
                },
              }),
            },
          ]" />
        </template>
      </template>
    </BasicTable>

  </div>
</template>
<script lang="ts" setup>
import { BasicTable, useTable, TableAction } from '@/components/Table';
import Dictionary from '@/utils/dictionary';
import { useRouter } from "vue-router";
import { IOrderSettlement } from "@/api/hby/orderSettlement/type";
import { formatMoney } from '@/utils/number';
import { getOrderList } from '@/api/hby/resourceLeague/index';
import { Avatar, Tooltip, Image } from 'ant-design-vue';

const router = useRouter();
const dicts = Dictionary.getLocalMulti(['orderStatus', 'logisticsMode']);


const [registerTable] = useTable({
  api: getOrderList,
  columns: [
    {
      title: '订单号',
      dataIndex: 'suborderNo',
      width: 300,
    },
    {
      title: '商品信息',
      dataIndex: 'orderInfo',
      width: 300,
    },
    {
      title: '订单金额',
      dataIndex: 'orderMoney',
      width: 300,
    },
    {
      title: '订单状态',
      dataIndex: 'suborderStatusText',
      width: 100,
    },
    {
      title: '物流类型',
      dataIndex: 'logisticsModeText',
      width: 160,
    },
    {
      title: '出单板块',
      dataIndex: 'templateName',
      width: 200,
    },
    {
      title: '订单来源',
      dataIndex: 'shopName',
      width: 240,
    },
    {
      title: '发布者',
      dataIndex: 'userName',
      width: 214
    },
    {
      title: '下单时间',
      dataIndex: 'createTime',
      width: 214,
    }
  ],
  showIndexColumn: true,
  clickToRowSelect: false,
  useSearchForm: true,
  showTableSetting: true,
  tableSetting: { fullScreen: true },
  formConfig: {
    labelWidth: 100,
    schemas: [
      {
        field: `keyWord`,
        label: `关键词`,
        component: 'Input',
        componentProps: {
          placeholder: '输入产品名称/组织名称',
        },
        colProps: {
          span: 6,
        },
      },
      {
        field: `suborderStatus`,
        label: `订单状态`,
        component: 'Select',
        componentProps: {
          fieldNames: { label: 'dictLabel', value: 'dictValue' },
          options: dicts.orderStatus,
        },
        colProps: {
          span: 4,
        },
      },
      {
        field: `logisticsMode`,
        label: `物流类型`,
        component: 'Select',
        componentProps: {
          fieldNames: { label: 'dictLabel', value: 'dictValue' },
          options: dicts.logisticsMode,
        },
        colProps: {
          span: 4,
        },
      },
      {
        field: `[startTime, endTime]`,
        label: `下单时间`,
        component: 'RangePicker',
        componentProps: {
          format: 'YYYY-MM-DD',
          placeholder: ['开始时间', '结束时间'],
        },
        colProps: {
          span: 6,
        },
      },

    ],
  },
  actionColumn: {
    width: 120,
    title: '操作',
    dataIndex: 'action',
  },
  afterFetch: (data: IOrderSettlement[]) => {
    return data.map((item) => {
      return {
        ...item,
        suborderStatusText: dicts.orderStatus.find((v) => v.dictValue == item.suborderStatus)?.dictLabel,
        logisticsModeText: dicts.logisticsMode.find((v) => v.dictValue == item.logisticsMode)?.dictLabel,
        totalAmount: isNaN(item.totalAmount) ? item.totalAmount : formatMoney({ money: item.totalAmount, isShowFree: false }),
        payAmount: isNaN(item.payAmount) ? item.payAmount : formatMoney({ money: item.payAmount, isShowFree: false }),
        merchantFee: isNaN(item.merchantFee) ? item.merchantFee : formatMoney({ money: item.merchantFee, isShowFree: false }),
        unSplitAmount: isNaN(item.unSplitAmount) ? item.unSplitAmount : formatMoney({ money: item.unSplitAmount, isShowFree: false }),
      };
    });
  },
});



</script>

<style lang="less" scoped>
.merchant-platform-container {

  .table-container {
    .image-text {
      display: flex;
      align-items: center;
      gap: 16px;

      .text {
        width: 100px;
        text-align: left;
      }
    }
  }
}
</style>

